<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8" isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>数据 - AdminLTE2定制版</title>
	<meta name="description" content="AdminLTE2定制版">
	<meta name="keywords" content="AdminLTE2定制版">

	<!-- Tell the browser to be responsive to screen width -->
	<meta
			content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
			name="viewport">

	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/plugins/ztree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/plugins/ztree/js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/morris/morris.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/select2/select2.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">

	<link rel="stylesheet"
		  href="../plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet"
		  href="../plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet"
		  href="../plugins/ionicons/css/ionicons.min.css">
	<link rel="stylesheet"
		  href="../plugins/iCheck/square/blue.css">
	<link rel="stylesheet"
		  href="../plugins/morris/morris.css">
	<link rel="stylesheet"
		  href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
	<link rel="stylesheet"
		  href="../plugins/datepicker/datepicker3.css">
	<link rel="stylesheet"
		  href="../plugins/daterangepicker/daterangepicker.css">
	<link rel="stylesheet"
		  href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
	<link rel="stylesheet"
		  href="../plugins/datatables/dataTables.bootstrap.css">
	<link rel="stylesheet"
		  href="../plugins/treeTable/jquery.treetable.css">
	<link rel="stylesheet"
		  href="../plugins/treeTable/jquery.treetable.theme.default.css">
	<link rel="stylesheet"
		  href="../plugins/select2/select2.css">
	<link rel="stylesheet"
		  href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
	<link rel="stylesheet"
		  href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
	<link rel="stylesheet"
		  href="../plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet"
		  href="../plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet"
		  href="../css/style.css">
	<link rel="stylesheet"
		  href="../plugins/ionslider/ion.rangeSlider.css">
	<link rel="stylesheet"
		  href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
	<link rel="stylesheet"
		  href="../plugins/bootstrap-slider/slider.css">

	<SCRIPT type="text/javascript">
		// 定义页面对应的树形组件
		var zTreeObj;
		var setting = {check: {enable: true},data: {simpleData: {enable: true}}};

		var zNodes =${rolePermissionJson}
				/*        var zNodes=[
                            {id:1,pId:0,name:'平台系统管理',checked:false},

                        ]*/
				$(document).ready(function(){

					zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes)
					var zTree = $.fn.zTree.getZTreeObj("treeDemo")
					zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" }
					zTreeObj.expandAll(true);//true：展开所有
				});

		//实现权限分配
		function submitCheckedNodes() {
			//1.获取所有的勾选权限节点
			var nodes = zTreeObj.getCheckedNodes(true);//true:被勾选，false：未被勾选
			//2.循环nodes，获取每个节点的id，并将数据加入数组
			//1,2,3,4,5     1+","+2+","+3.....
			//数据的临时存储数组，为了方便内容连接成为一个由逗号分隔的字符串
			var moduleArrays = [];
			for(var i=0;i<nodes.length;i++) {
				moduleArrays.push(nodes[i].id);
			}
			//3.将数组中的数据使用,连接后，赋值给表单，传入后台
			$("#permissionIds").val(moduleArrays.join(','));    //1,2,3,4,5
			$("#icform").submit();
		}

	</SCRIPT>

</head>



<body class="hold-transition skin-blue sidebar-mini">

<div class="wrapper">

	<!-- 页面头部 -->
	<jsp:include page="../common/header.jsp"></jsp:include>
	<!-- 页面头部 /-->

	<!-- 导航侧栏 -->
	<jsp:include page="../common/aside.jsp"></jsp:include>
	<!-- 导航侧栏 /-->

	<!-- 内容区域 -->
	<div class="content-wrapper">

		<%--<!-- 内容头部 -->
        <section class="content-header">
            <h1>
                角色管理 <small>全部角色</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="../index.jsp"><i
                        class="fa fa-dashboard"></i> 首页</a></li>
                <li><a
                        href="../role/findAll.do">角色管理</a></li>

                <li class="active">全部角色</li>
            </ol>
        </section>
        <!-- 内容头部 /-->--%>

		<!-- 正文区域 -->
		<section class="content">

			<!-- .box-body -->
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">角色 [${role.roleName}] 权限列表</h3>
				</div>
				<div class="box-body">
					<!-- 数据表格 -->
					<div class="table-box">
						<!-- 树菜单 /-->
						<form id="icform" method="post" action="${pageContext.request.contextPath}/role?operation=updateRolePermission">
							<input type="hidden" name="roleId" value="${role.id}"/>
							<input type="hidden" id="permissionIds" name="permissionIds" value=""/>
							<ul id="treeDemo" class="ztree"></ul>
						</form>
						<!--工具栏-->
						</form>
						<div class="box-tools text-left">
							<button type="button" class="btn bg-maroon" onclick="submitCheckedNodes()">保存</button>
							<button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
						</div>
					</div>
				</div>
			</div>

		</section>
		<!-- 正文区域 /-->

	</div>
	<!-- @@close -->
	<!-- 内容区域 /-->

	<!-- 底部导航 -->
	<footer class="main-footer">
		<div class="pull-right hidden-xs">
			<b>Version</b> 1.0.8
		</div>
		<strong>Copyright &copy; 2014-2017 <a
				href="http://www.itcast.cn">研究院研发部</a>.
		</strong> All rights reserved. </footer>
	<!-- 底部导航 /-->

</div>


</body>

</html>